<template>
  <div class="app-container" style="height:100%">
    <div class="cell-flex">
      <!-- 视频列表 -->
      <div v-loading="listLoading" class="cell-flex_hd" style="padding: 5px 0;background: #666;box-sizing:border-box;height:70vh;margin-right:5px;width:280px;">
        <div ref="listroll" class="videolist">
          <el-col v-if="!FromReport" :span="24" class="class-name">
            <span class="title">任务名称: {{ taskname }}</span>
          </el-col>
          <div v-for="(item, index) of VideoOptions" :id="'video' + item.Id" :key="item.Id" class="list" @click="handleChangeVideo(item)">
            <el-alert
              :title="index + '. ' +item.Name"
              :type="item.active? 'success' :'info'"
              :closable="false"
            />
          </div>
          <div v-if="VideoOptions.length === 0" class="list">
            <el-alert
              title="暂无数据！"
              type="info"
              :closable="false"
            />
          </div>
            
        </div>
        <div v-if="!FromReport" class="block">
              <el-pagination
                  background
                  :small="false"
                  :pager-count="5"
                  @current-change="handleCurrentChange"
                  :current-page.sync="Page"
                  :page-size="10"
                  layout="prev, pager, next, slot"
                  :total="VideoTotal"
                  >
                  <el-input class="jumpPage" title="跳转" @change="ChangePage" v-model="inputPage" />
              </el-pagination>
        </div>
         
      </div>
      <div v-loading="listLoading" class="cell-flex_item" style="height:80vh;min-width:300px">
        <div class="videobox">
<!--          <div class="video-head">-->
<!--            <el-button type="primary" plain :disabled="taskStatus !== 100" :title="taskStatus !== 100 ? '任务未完成': '查看报告'">查看报告</el-button>-->
<!--          </div>-->
          <div v-if="FileType === 0" class="video-body">
            <video v-if="videoUrl" id="hvideo" controls="controls" controlslist="nodownload" autoplay loop="loop" style="width: 100%; height: 100%; margin:0 auto" @error.prevent="handleVideoError">
              <source :src="videoUrl" type="video/mp4">
            </video>
          </div>
          <div v-if="FileType === 1" class="video-body">
            <el-image
              v-if="videoUrl"
              style="width: 100%;height: 100%"
              :src="videoUrl"
              :preview-src-list="[videoUrl]"
              fit="contain"
            />

       <!--    <div class="video-foot" style="margin-top:20px;"> -->
         
           <!--  <el-button-group>
              <el-button type="primary" icon="el-icon-arrow-left" @click="handleVideoNext(false)">{{ FileType === 0 ? '上一视频':'上一图片' }}</el-button>
              <el-button type="primary" @click="handleVideoNext(true)">{{ FileType === 0 ? '下一视频':'下一图片' }}<i class="el-icon-arrow-right el-icon--right" /></el-button>
            </el-button-group> -->


            <!-- </div> -->
          </div> 
        </div>
         <div class="title" style="margin-top:40px;margin-left:5px;">
              <el-row>
                <el-col :span="18">
                  <div style="margin-top:-100px;margin-left:60px;margin-top:-100px;">
                      <div style="border-radius:3px; width:200px;height:50px;margin-left:-80px;margin-top:30px;text-align:center;padding-top:15px;padding-left:10px;box-shadow:20px 20px 20px #ccc">{{ VideoName }}</div>
                      <div style="width:80px;height:50px;border-radius:3px;text-align:center;margin-left:130px;margin-top:-50px;padding-top:15px;box-shadow:20px 20px 20px #ccc" v-if="!FromReport">{{ taskStatus }}%</div>
                  </div>
                  
                </el-col>

                <el-col v-if="!FromReport" :span="8">
                  <div class="copyinput" style="max-height: 10vh; width:320px; margin-top:-80px;margin-left:280px;overflow:auto">
                    <div v-if="HasLabel" style="display:inline-block;padding: 5px;width:500px;height:50px;">
                      <el-input
                        v-if="inputVisible"
                        ref="saveTagInput"
                        v-model="inputValue"
                        class="input-new-tag"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                        style="width:200px;height:20px;"
                      />
                      <el-button style="background-color:rgb(119.134,251)" v-else class="button-new-tag" size="small" @click="showInput">+ 补充GT</el-button>
                    </div>
                    <span v-for="(item, idx) of ReplenishArray" :key="idx" class="result_tip">
            
                          <el-tag :type="item.type | tagFilter" closable :disable-transitions="false" @close="handleClose(item)" style="display:inline-block;float:right;">{{ item.title }}</el-tag>
                    </span>
                    <span v-if="!HasLabel && ReplenishArray.length === 0">
                      <el-tag type="info">无</el-tag>
                    </span>
                  </div>
                </el-col>
              </el-row>  
          </div>    
      </div>
      <div class="cell-flex_ft">
        <div v-loading="tagLoading" class="videotip">
          <template v-if="!tagLoading">
            <div v-if="false" class="changeicon">
              <i class="el-icon-guide" />
            </div>
            <div class="title">算法版本 {{ versionName }}</div>
            <!-- <el-select v-model="editionId" placeholder="请选择" style="width: 100%;" @change="handleEditionChange">
              <el-option
                v-for="item in editionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
            <div class="title">预测结果</div>
            <div class="copyinput" style="max-height: 42vh;">
              <span v-for="(item, idx) of tagArray" :key="idx" class="result_tip cursor">
                <el-tag :type="item.type | tagFilter" :title="item.type | titleFilter" class="tag-class" @click="ReCheckVideoLabel(item)">{{ item.title }}</el-tag>
              </span>
              <span v-if="tagArray.length === 0" class="result_tip">
                <el-tag type="info">暂无标签</el-tag>
              </span>
            </div> 
          </template>
        </div> 
        <div style="margin-top:50px;margin-left:8px;backgroung-color:white;border:1px;border-radius:1px;box-shadow:20px 20px 20px #ccc;">
            <el-button type="primary" style="width:280px;height:50px;border-radius:5px;">退出</el-button>
          </div>
      </div>
  </div>
  </div>
</template>

<script>
import { fetchForecastInfo, fetchTaskVideoList, ReCheckVideoLabel, fetchTaskStatus } from '@/api/video'
import { mapGetters } from 'vuex'

export default {
  name: 'Analysis',
  filters: {
    tagFilter(status) {
      const statusMap = {
        '-3': 'warning',
        '-2': '',
        '-1': 'danger',
        '0': 'info',
        '1': 'success'
      }
      return statusMap[status]
    },
    titleFilter(status) {
      const statusMap = {
        '-3': '',
        '-2': '补充',
        '-1': '错误',
        '0': '无法判断',
        '1': '正确'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      FromReport: false,
      isCreateMethod: true,
      inputPage: 1,
      pagercount: 5,
      currentPage: 1,
      HasLabel: true,
      listLoading: false,
      FileType: 0,
      temp: {
        'Accuracy': 0,
        'Coverage': 0,
        'Recall': 0,
        'ValidAve': 0
      },
      dialogTaskresult: false,
      taskStatus: '0',
      taskId: '',
      taskname: '测试任务',
      inputVisible: false,
      inputValue: '',
      ReplenishArray: [],
      VideoId: '',
      VideoType: 0, // 0 视频 1 图片 2 文本
      tagLoading: false,
      tagArray: [],
      LabelArray: [],
      editionId: '',
      editionOptions: [],
      versionName: '算法版本',
      VideoName: '视频名称',
      // videoUrl: require('@/assets/video/5s.mp4'),
      videoUrl: '',
      VideoOptions: [],
      Page: 1,
      Size: 10,
      VideoTotal: 0,
      projectId: 0
    }
  },
  computed: {
    ...mapGetters([
      'ProjectId'
    ]),
    watchProjectId() {
      return this.$store.state.constants.ProjectId
    },
    watchPage() {
      return this.Page
    }
  },
  watch: {
    watchProjectId(curVal, oldVal) {
      this.$router.push({ path: '/dashboard', query: { id: this.ProjectId }})
    },
    watchPage(curVal, oldVal) {
      this.fetchTaskVideoList(this.taskId)
    }
  },
  created() {
    const query = this.$route.query
    if (query && query.id) {
      this.taskId = query.id
      this.fetchTaskVideoList(this.taskId)
      const taskArray = JSON.parse(sessionStorage.getItem('SET_TASK'))
      this.editionId = taskArray.version
      this.versionName = taskArray.name
      this.taskname = taskArray.taskname
      this.FileType = taskArray.InputType
      this.HasLabel = taskArray.HasLabel
      this.ReportKey = taskArray.ReportKey
      this.fetchTaskStatus()
    } else if (query && query.FromReport) {
      console.log(query)
      this.FileType = query.FileList[0].Type
      this.FromReport = query.FromReport
      this.editionId = query.VersionId
      this.FromReportVideoList(query.FileList)
    }
  },
  mounted() {
  },
  methods: {
    ChangePage() {
      this.Page = this.inputPage
    },
    handleVideoNext(flag) {
      // flag: false 上一页  true 下一页
      let videoUrl = ''
      for (let i = 0; i < this.VideoOptions.length; i++) {
        if (this.VideoOptions[i].active === true) {
          if (!flag && i !== 0) {
            this.VideoOptions[i].active = false
            this.VideoOptions[i - 1].active = true
            this.VideoName = this.VideoOptions[i - 1].Name
            this.VideoId = this.VideoOptions[i - 1].Id
            videoUrl = this.VideoOptions[i - 1].Url
            this.fetchForecastInfo()
            break
          } else if (!flag && i === 0) {
            this.Page > 1 ? this.Page-- : this.Page
            this.inputPage = this.Page
          }
          if (flag && i !== this.VideoOptions.length - 1) {
            this.VideoOptions[i].active = false
            this.VideoOptions[i + 1].active = true
            this.VideoName = this.VideoOptions[i + 1].Name
            this.VideoId = this.VideoOptions[i + 1].Id
            videoUrl = this.VideoOptions[i + 1].Url
            this.fetchForecastInfo()
            break
          } else if (flag && i === this.VideoOptions.length - 1) {
            this.Page < (this.VideoTotal / this.Size) ? this.Page++ : this.Page
            this.inputPage = this.Page
          }
        }
      }
      if (videoUrl) {
        this.videoUrl = ''
        this.$nextTick(() => {
          this.videoUrl = videoUrl
        })
      }
    },
    handleVideoError(error) {
      console.log(error)
    },
    handleCurrentChange(val) {
      this.Page = val
      this.inputPage = this.Page
    },
    handleClose(tag) {
      if (!this.HasLabel) {
        // this.$message.error('当前任务无需复检！')
        return
      }
      this.ReplenishArray = this.ReplenishArray.filter(item => item.title !== tag.title)
      this.$nextTick(() => {
        this.ReCheckVideoLabel()
      })
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.ReplenishArray.unshift({
          title: inputValue,
          type: -2
        })
        this.LabelArray.forEach(item => {
          if (item.FileId === this.VideoId) {
            item.Replenish[inputValue] = 1
          }
        })
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    ReCheckVideoLabel(option) {
      if (!this.HasLabel) {
        // this.$message.error('当前任务无需复检！')
        return
      }
      // (option && (option.visible = false))
      let optionType = ''
      if (option) {
        // 初始为0 点击确认 1 再次点击取消确认
        if (Number(option.type) === 0) {
          optionType = '1'
        } else if (Number(option.type) === 1) {
          optionType = '0'
        }
        this.tagArray.forEach(item => {
          if (item.title === option.title) {
            item.type = optionType
          }
        })
        this.LabelArray.forEach(item => {
          if (item.FileId === this.VideoId) {
            item.Result[option.title] = Number(optionType)
          }
        })
        console.log(this.LabelArray)
      }
      // const params = {
      //   'ProjectId': Number(this.ProjectId),
      //   'Replenish': Replenish,
      //   'Result': Result,
      //   'VersionId': Number(this.editionId),
      //   'VideoId': Number(this.VideoId)
      // }
      // ReCheckVideoLabel(params).then(() => {
      //   this.fetchTaskStatus()
      // })
    },
    fetchTaskStatus() {
      fetchTaskStatus({ taskId: Number(this.taskId) }).then(res => {
        let p = (res.Data[0].FinishNum + res.Data[0].ErrorNum) / (res.Data[0].FinishNum + res.Data[0].UnFinishNum + res.Data[0].GoingNum + res.Data[0].ErrorNum) * 100
        if (isNaN(p)) {
          p = 0
        }
        this.taskStatus = Math.floor(p)
      })
    },
    FromReportVideoList(FileList) {
      let videoUrl = ''
      this.VideoTotal = FileList.length
      if (FileList.length === 0) {
        this.listLoading = false
        return
      }
      this.VideoOptions = FileList.map(item => {
        item.active = false
        return item
      })
      this.LabelArray = FileList.map(item => {
        var re = {}
        re.FileId = item.Id
        re.FileType = item.Type
        return re
      })
      videoUrl = this.VideoOptions[0].Url
      this.VideoName = this.VideoOptions[0].Name
      this.VideoId = this.VideoOptions[0].Id
      this.VideoType = this.VideoOptions[0].Type
      this.VideoOptions[0].active = true
      if (videoUrl) {
        this.videoUrl = ''
        this.$nextTick(() => {
          this.videoUrl = videoUrl
        })
      }
      this.listLoading = false
      this.fetchForecastInfo()
    },
    fetchTaskVideoList(id) {
      if (!this.isCreateMethod) {
        var LabelArray = []
        this.LabelArray.map(item => {
          if (item.Result) {
            LabelArray.push(item)
          }
        })
        const params = {
          'ProjectId': Number(this.ProjectId),
          'VersionId': Number(this.editionId),
          'VideoId': Number(this.VideoId),
          'Label': LabelArray
        }
        console.log(params)
        ReCheckVideoLabel(params).then(() => {
          this.fetchTaskStatus()
        })
      }
      this.isCreateMethod = false
      this.listLoading = true
      let videoUrl = ''
      const params = {
        Page: this.Page,
        Size: 10,
        taskId: Number(id)
      }
      fetchTaskVideoList(params).then(res => {
        if (this.VideoTotal === 0) {
          this.VideoTotal = res.Count
        }
        if (res.Data.length === 0) {
          this.listLoading = false
          return
        }
        this.VideoOptions = res.Data.map(item => {
          item.active = false
          return item
        })
        this.LabelArray = res.Data.map(item => {
          var re = {}
          re.FileId = item.Id
          re.FileType = item.Type
          return re
        })
        videoUrl = this.VideoOptions[0].Url
        this.VideoName = this.VideoOptions[0].Name
        this.VideoId = this.VideoOptions[0].Id
        this.VideoType = this.VideoOptions[0].Type
        this.VideoOptions[0].active = true
        if (videoUrl) {
          this.videoUrl = ''
          this.$nextTick(() => {
            this.videoUrl = videoUrl
          })
        }
        this.listLoading = false
        this.fetchForecastInfo()
      })
    },
    fetchForecastInfo() {
      this.tagLoading = true
      if (!this.FromReport) {
        this.fetchTaskStatus()
      }

      const params = {
        FileType: this.VideoType,
        ProjectId: Number(this.ProjectId),
        VersionId: Number(this.editionId),
        VideoId: this.VideoId
      }
      fetchForecastInfo(params).then(res => {
        for (var i = 0; i < this.LabelArray.length; i++) {
          if (this.LabelArray[i].FileId === this.VideoId && this.LabelArray[i].FileType === this.VideoType) {
            this.LabelArray[i].Replenish = res.Data[0].Replenish ? res.Data[0].Replenish : {}
            this.LabelArray[i].Result = res.Data[0].Result
            break
          }
        }
        const tagArray = []
        const ReplenishArray = []
        if (res.Data.length > 0) {
          const result = res.Data[0].Result ? res.Data[0].Result : {}
          const resultKey = Object.keys(result)
          if (resultKey.length > 0) {
            resultKey.map(item => {
              tagArray.push({
                title: item,
                type: String(result[item])
              })
            })
          }
          const Replenish = res.Data[0].Replenish ? res.Data[0].Replenish : {}
          const Replenishkay = Object.keys(Replenish)
          if (Replenishkay.length > 0) {
            Replenishkay.map(item => {
              ReplenishArray.push({
                title: item,
                type: Replenish[item]
              })
            })
          }
        }
        this.tagArray = tagArray
        this.ReplenishArray = ReplenishArray
        this.tagLoading = false
      }).catch(() => {
        this.tagLoading = false
      })
    },
    handleChangeVideo(option) {
      let videoUrl = ''
      this.VideoOptions = this.VideoOptions.map(item => {
        if (item.Id === option.Id) {
          videoUrl = item.Url
          this.VideoName = item.Name
          this.VideoId = item.Id
          item.active = true
        } else {
          item.active = false
        }
        return item
      })
      if (videoUrl) {
        this.videoUrl = ''
        this.$nextTick(() => {
          this.videoUrl = videoUrl
        })
      }
      this.fetchForecastInfo()
    }
  }
}
</script>

<style lang="scss">
  .jumpPage{
    margin-left: 5px;
    width: 50px;
  }
  .el-input__inner {
    height: 22px;
  }
</style>

<style lang="scss" scoped>
  .changeicon{
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .videobox{
    width: 100%;
    box-sizing: border-box;
    padding-right: 1px;
    height: 100%;
   /* display: -webkit-box;
    display: -webkit-flex;
    display: flex;*/
    flex-direction: column;
    .video-body{
      text-align: center;
      background: #666;
     /* -webkit-box-flex: 1;
      -webkit-flex: 1;*/
      height: 70vh;
    }
    .video-foot{
      text-align: center;
      padding: 30px;
      box-sizing: border-box;
      margin-bottom:-150px;

    }
    .video-head{
      text-align: right;
      padding: 20px;
      box-sizing: border-box;
    }
  }
  .videotip{
    margin-left: 1%;
    width: 280px;
    height: 70vh;
    background: #666;
    color: #fff;
    padding: 20px;
    position: relative;
    .title{
      margin: 20px 0 5px 0;
      font-size: 14px;
    }
    /*flex:1;*/
  }
  .copyinput{
    word-wrap: break-word;
    background: white;
    font-size: 14px;
    min-height: 14px;
    border-radius: 3px;
    border: 1px solid #C0C4C0;
    color: #333;
    padding: 10px;
    max-height: 20vh;
    overflow: auto;
    .result_tip {
      display: inline-block;
      padding: 3px;
    }
    & >>> .el-tag.el-tag--warning{
      color: #e6a23c;
    }
  }
  .videologo{
    margin-left: 20%;
    height: 50px;
    width: 80%;
    background: #eee;
  }
  .videolist{
    height: 70vh;
    width: 280px;
    background: #666;
    color: #fff;
    overflow: auto;
    .list{
      cursor: pointer;
      padding: 5px;
    }
    flex:1;
  }
  .class-name{
    padding-bottom: 20px;
    .title{
      font-size: 18px;
    }
    .tip{
      cursor: pointer;
      color: #F56C6C;
      margin-right: 20px;
      font-size: 12px;
    }
  }
  .tag-class{
    &:hover {
      box-shadow: 0px 0px 3px rgba(1,1,1,0.3);
    }
  }
  .block{
    width:280px;
    height:50px;
    box-shadow:20px 20px 20px #ccc;
    background-color:white;
    margin-top:50px;
    border-radius:5px;
    border:1px;
    margin-left:0px;
    box-shadow:inset 10 10 10px #C0C4C0;
    border:5px gray;
    overflow:auto;
  }
  .el-pagination is-background{
    width:150px;
  }
  ul li{
    list-style:none;
    float:right;
    padding-left:10px;
  }
</style>

